<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import axios from 'axios'
const store = useStore()
const but = ref(false)

const fileUpload = ref(null)
const fileUpload1 = ref(null)
// const file = ref(null)
// const file1 = ref(null)
console.info('Hello About....')
const state = reactive({
  token: store.state.auth.ACCESS_TOKEN
})
// const handleFileUpload= ()=>{
//   file.value=fileUpload.value.files[0]
// }
const submitFile=()=>{
  const formData = new FormData()
  console.log(fileUpload.value.files[0])
  formData.append('files', fileUpload.value.files[0])
  //formData.append('files', fileUpload1.value.files[0])
  axios.post('api/Upload/doUploadAttach', formData, {
    headers:{'Content-Type': 'multipart/form-data', 'AuthorizationToken': state.token}
  }).then(response => {
    alert(JSON.stringify(response.data))
  })
}
const fileList = ref([])
</script>
<template>
  <div>
    Hello About 
    
    <button @click="but=!but">点我 </button>
    <transition
      enter-active-class="animate__animated animate__lightSpeedInLeft animate__delay-1s"
      leave-active-class="animate__animated animate__lightSpeedOutRight">
      <div v-if="but" class="box">HELLO </div>
    </transition>
    <transition
      enter-active-class="animate__animated animate__lightSpeedInLeft animate__delay-1s"
      leave-active-class="animate__animated animate__lightSpeedOutRight">
      <div v-if="but" class="box">HELLO </div>
    </transition>

    <input ref="fileUpload" type="file">
    <input ref="fileUpload1" type="file">
    <button @click="submitFile">上传文件</button>
    <br>
    <a-upload
      v-model:file-list="fileList"
      name="avatar"
      action="api/Upload/doUploadFile/test"
      :headers="{ 'AuthorizationToken': state.token}"
    >
      <a-button>
        <upload-outlined />
        Click to Upload
      </a-button>
    </a-upload>
  </div>
</template>
<style lang="less" scoped>
.box{ border: 5px dotted #000;
  width: 100px; height: 100px;
  background-color: red;
}
</style>